<template>
  <div class="ExpenseAmortization">
    <div class="search">
      <span>查询日期：</span>
      <el-date-picker
        v-model="searchDate.settleTime"
        type="month"
        value-format="yyyyMM"
        placeholder="选择月份"
      >
      </el-date-picker>
      <span>承包区名称：</span>
      <el-input
        v-model="searchDate.contractAreaName"
        placeholder="承包区名称"
        clearable
      ></el-input>
      <el-button type="primary" @click="searchData">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <el-button @click="add">新增</el-button>
    </div>
    <div class="content">
      <editable-table
        :tableData="tableData && tableData.list && tableData.list.data"
        :columns="tableData && tableData.fields"
        :loading="loading"
        @edit-save="handleSaveEdit"
      />
    </div>
    <div class="footer">
      <pagination
        :current-page="searchDate.pageDate.pageNum"
        :page-size="searchDate.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="maskFlag" class="mask">
      <div class="table">
        <div class="flex">
          <div class="title">新增承包区月度费用摊销数据</div>
          <i class="el-icon-close" @click="close"></i>
        </div>
        <div class="custom">
          <el-form
            label-position="left"
            label-width="100px"
            ref="ruleForm"
            :rules="rules"
            :model="formData"
          >
            <el-form-item label="月份" prop="settleTime">
              <el-date-picker
                v-model="formData.settleTime"
                type="month"
                value-format="yyyyMM"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="承包区名称" prop="contractAreaName">
              <el-input v-model="formData.contractAreaName"></el-input>
            </el-form-item>
            <el-form-item label="出港到付" prop="outboundCod">
              <el-input v-model.number="formData.outboundCod"></el-input>
            </el-form-item>
            <el-form-item label="协商代收" prop="negotiationCod">
              <el-input v-model.number="formData.negotiationCod"></el-input>
            </el-form-item>
            <el-form-item label="其他收入1" prop="otherIncome1">
              <el-input v-model.number="formData.otherIncome1"></el-input>
            </el-form-item>
            <el-form-item label="管理费" prop="managementFee">
              <el-input v-model.number="formData.managementFee"></el-input>
            </el-form-item>
            <el-form-item label="协商代扣" prop="negotiationDeduction">
              <el-input
                v-model.number="formData.negotiationDeduction"
              ></el-input>
            </el-form-item>
            <el-form-item label="止损扣款" prop="lossPreventionDeduction">
              <el-input
                v-model.number="formData.lossPreventionDeduction"
              ></el-input>
            </el-form-item>
            <el-form-item label="任务量扣款" prop="taskDeduction">
              <el-input v-model.number="formData.taskDeduction"></el-input>
            </el-form-item>
            <el-form-item label="其他支出1" prop="otherExpense1">
              <el-input v-model.number="formData.otherExpense1"></el-input>
            </el-form-item>
            <el-form-item label="代收到付" prop="codDispatch">
              <el-input v-model.number="formData.codDispatch"></el-input>
            </el-form-item>
            <el-form-item label="私了理赔" prop="privateClaim">
              <el-input v-model.number="formData.privateClaim"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="primary" round @click="save">保存</el-button>
            <el-button round @click="close">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getExpenseAmortizationList,
  editExpenseAmortizationList,
  addExpenseAmortizationList,
} from "@/api/statisticalCenter";

export default {
  name: "ExpenseAmortization",
  data() {
    return {
      loading: false,
      searchDate: {
        contractAreaName: "",
        settleTime: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      total: 0,
      tableData: null,
      maskFlag: false,
      formData: {
        settleTime: "",
        contractAreaName: "",
        outboundCod: "",
        negotiationCod: "",
        otherIncome1: "",
        managementFee: "",
        negotiationDeduction: "",
        lossPreventionDeduction: "",
        taskDeduction: "",
        otherExpense1: "",
        codDispatch: "",
        privateClaim: "",
      },
      rules: {
        settleTime: [{ required: true, message: "请选择月份" }],
        contractAreaName: [
          { required: true, message: "请输入承包区名称", trigger: "blur" },
        ],
        outboundCod: [
          { required: false, type: "number", message: "必须为数字值" },
        ],
        negotiationCod: [{ type: "number", message: "必须为数字值" }],
        otherIncome1: [{ type: "number", message: "必须为数字值" }],
        managementFee: [{ type: "number", message: "必须为数字值" }],
        negotiationDeduction: [{ type: "number", message: "必须为数字值" }],
        lossPreventionDeduction: [{ type: "number", message: "必须为数字值" }],
        taskDeduction: [{ type: "number", message: "必须为数字值" }],
        otherExpense1: [{ type: "number", message: "必须为数字值" }],
        codDispatch: [{ type: "number", message: "必须为数字值" }],
        privateClaim: [{ type: "number", message: "必须为数字值" }],
      },
    };
  },
  methods: {
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          addExpenseAmortizationList(this.formData).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.close();
              this.getTableData();
            }
          });
        } else {
          return false;
        }
      });
    },
    add() {
      this.maskFlag = true;
    },
    close() {
      this.maskFlag = false;
      this.formData = {};
    },
    getTableData() {
      this.loading = true;
      getExpenseAmortizationList(this.searchDate).then((res) => {
        this.tableData = res.data;
        this.total = res.data.list.total;
        this.loading = false;
      });
    },
    handleSaveEdit(row) {
      editExpenseAmortizationList(row).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getTableData();
        }
      });
    },
    searchData() {
      if (this.searchDate.settleTime) {
        this.searchDate.pageDate.pageNum = 1;
        this.searchDate.pageDate.pageSize = 10;
        this.getTableData();
      } else {
        this.$message.warning("请选择查询时间！");
      }
    },
    reset() {
      this.searchDate.settleTime = null;
      this.searchDate.contractAreaName = null;
    },
    handleSizeChange(size) {
      this.searchDate.pageDate.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(current) {
      this.searchDate.pageDate.pageNum = current;
      this.getTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.ExpenseAmortization {
  padding: 20px;
  .search {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    .el-date-editor {
      margin-right: 20px;
      width: 400px;
    }
    span {
      font-size: 14px;
      color: #606266;
    }
    .el-input {
      margin-right: 20px;
      width: 200px;
    }
  }
  .content {
    margin-top: 20px;
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba($color: #000000, $alpha: 0.2);
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }
    .title {
      padding-left: 12px;
      border-left: 6px solid skyblue;
      font-size: 24px;
      font-weight: bold;
    }
    i {
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }
    .table {
      margin: 80px auto;
      padding: 30px;
      width: 30%;
      border-radius: 24px;
      background-color: #fff;
      .custom {
        margin-bottom: 20px;
        padding: 0 20px;
        .btn {
          display: flex;
          justify-content: space-around;
          .el-button {
            padding: 12px 36px;
            font-size: 16px;
          }
        }
      }
    }
    &::v-deep .t-table {
      .t-table__header {
        tr th {
          font-size: 16px;
          font-weight: bolder;
        }
      }
      .t-table__body {
        tr td {
          font-size: 16px;
          font-weight: bolder;
          color: #666;
        }
      }
    }
  }
}
</style>
